<template>
    <el-row>
        <el-col :span="24" style="padding: 24px;">
            <el-button icon="Plus" @click="createWarehouse" type="primary">新建仓库</el-button>
            <el-button icon="Refresh" @click="getList">刷新列表</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" style="padding:12px; min-height: 400px; height: 70vh;">
            <el-table v-loading="loading" :data="dataList" style="width: 80%; min-width: 600px; height: 100%;">
                <el-table-column label="仓库名称" align="center" prop="name"></el-table-column>
                <el-table-column label="联系人" align="center" prop="contactPerson"></el-table-column>
                <el-table-column label="联系电话" align="center" prop="contactPhoneNum"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.enabled ? 'success' : 'danger'">
                            {{ scope.row.enabled ? '启用' : '停用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="所属门店" align="center">
                    <template #default="scope">
                        {{ scope.row.store?.name || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-link :underline="false" type="primary" @click="showDetailPage(scope.row)">
                            详情
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <div style="width: 80%; min-width: 600px; margin: 0 auto; padding: 0;">
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { InventoryUiAction } from '../../public/engine/uiAction/inventoryUiAction'
import { Definition } from '../../public/engine/common/definition'
import { DataPage } from '../../public/network/communicationConverter'
import { useRouter } from 'vue-router'
import EventBus from '../../public/engine/ipc/eventBus'

export default {
    name: 'warehouses',
    components: {
    },
    data() {
        return {
            total: 0,
            loading: false,
            queryParams: {
                pageNum: 1,
                pageSize: Definition.gDefualPageSize,
            },
            dataList: [],
            inventoryUiAction: new InventoryUiAction(),
            router: useRouter(),
        }
    },
    methods: {
        async getList() {
            try {
                this.loading = true
                const res = await this.inventoryUiAction.getWarehouseList({
                    pageInfo: new DataPage(this.queryParams.pageNum, 0, this.queryParams.pageSize),
                    showLoadingPage: false
                })

                if (Array.isArray(res)) {
                    this.dataList = res
                    this.total = res.length // Note: This may need adjustment based on pagination
                } else if (res?.resErr) {
                    ElMessage.error('获取仓库列表失败')
                }
            } catch (error) {
                console.error('获取仓库列表失败', error)
                ElMessage.error('获取仓库列表失败')
            } finally {
                this.loading = false
            }
        },

        createWarehouse() {
            this.router.push({
                path: '/inventory/inventoryMgt/warehouse',
                query: {
                    type: 'create'
                }
            })
        },

        showDetailPage(warehouse) {
            this.router.push({
                path: '/inventory/inventoryMgt/warehouse',
                query: {
                    id: warehouse.id,
                    type: 'detail'
                }
            })
        },

        handleWarehouseUpdated() {
            this.getList();
        },
    },
    mounted() {        
        this.getList()
        EventBus.on('warehouseUpdated', this.handleWarehouseUpdated)
    },

    beforeUnmount() {        
        EventBus.off('warehouseUpdated', this.handleWarehouseUpdated)
    }
}
</script>